
<template>
  <div class="roadBox">
    <TableList2 :list="road.list" :column="road.column">
      <div slot="column2" class="noBlueBg">
        <el-table-column
          prop="sectionName"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" plain @click="editRoad(scope.row)">编辑</el-button>
            <el-button type="warning" size="mini" plain @click="delRoad(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="sectionName"
          align="center"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="type"
          align="center"
          label="类别">
          <template slot-scope="scope">
            {{getStateName(scope.row.type)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="centerUnder"
          align="center"
          label="所属中心">
        </el-table-column>
        <el-table-column
          prop="startLongitude"
          align="center"
          label="起点经度">
        </el-table-column>
        <el-table-column
          prop="startLatitude"
          align="center"
          label="起点纬度">
        </el-table-column>
        <el-table-column
          prop="endLongitude"
          align="center"
          label="终点经度">
        </el-table-column>
        <el-table-column
          prop="endLatitude"
          align="center"
          label="终点纬度">
        </el-table-column>
        <el-table-column
          prop="roadLength"
          align="center"
          label="里长(km)">
        </el-table-column>

      </div>
      <div slot="option" class="noBlueBg">
        <el-form :inline="true" :model="road.options" class="bottom-border" ref="roadOptionForm">
          <el-form-item label="名称" prop="sectionName">
            <el-input v-model="road.options.sectionName" clearable placeholder="请输入名称" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="类别" prop="type">
            <el-select v-model="road.options.type" placeholder="请选择类别" size="mini">
              <el-option v-for="item in roadType"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属中心" prop="centerUnder">
            <el-input v-model="road.options.centerUnder" clearable placeholder="请输入中心" size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="loadRoadList"><span class="el-icon el-icon-search"></span>
              查询
            </el-button>
            <el-button size="mini" @click="resetOption('roadOptionForm')"><span
              class="el-icon el-icon-refresh-left"></span> 重置
            </el-button>
          </el-form-item>
          <el-form-item class="floatRight">
            <el-button size="mini" type="success" @click="addRoad"><span class="el-icon el-icon-plus"></span>新增
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="page noBlueBg" slot="bottom">
        <el-pagination
          @size-change="changeRoadSize"
          @current-change="changeRoadPage"
          :page-sizes="[20, 50, 100, 200]"
          :current-page="road.page"
          :page-size="road.limit"
          layout="sizes,total,prev, pager, next, jumper"
          :total="road.totals">
        </el-pagination>
      </div>
    </TableList2>
    <Dialog :cfg="dialogCfg" ref="dialog">
      <el-form :model="editData" label-width="80px" :inline="true" :rules="rules" ref="addForm">
        <el-form-item label="名称" prop="sectionName">
          <el-input v-model="editData.sectionName" clearable placeholder="请输入用户名" size="mini"></el-input>
        </el-form-item>

        <el-form-item label="所属中心" prop="centerUnder">
          <el-input v-model="editData.centerUnder" clearable placeholder="请输入所属中心" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="起点经度" prop="startLongitude">
          <el-input v-model="editData.startLongitude" clearable placeholder="请输入起点经度" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="起点纬度" prop="startLatitude">
          <el-input v-model="editData.startLatitude" clearable placeholder="请输入起点纬度" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="终点经度" prop="endLongitude">
          <el-input v-model="editData.endLongitude" clearable placeholder="请输入终点经度" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="终点纬度" prop="endLatitude">
          <el-input v-model="editData.endLatitude" clearable placeholder="请输入终点纬度" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="editData.type" placeholder="请选择" size="mini">
            <el-option
              v-for="item in roadType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="里长" prop="roadLength">
          <el-input v-model="editData.roadLength" clearable placeholder="请输入里长" size="mini"></el-input>
        </el-form-item>

      </el-form>
    </Dialog>
  </div>
</template>

<script>
  import TableList2 from 'comp/common/TableList2';

  import Dialog from 'comp/common/Dialog.vue';

  export default {
    name: "Road",
    components: {
      Dialog,
      TableList2
    },
    data() {
      return {
        roadType: [],
        road: {
          limit: 20,
          page: 1,
          pages: 1,
          totals: 0,
          list: [],
          activeID: '',
          roadTab: {},
          options: {
            sectionName: '',
            centerUnder: '',
            type: ''
          },
          column: [
            {
              prop: 'sectionName',
              label: '名称'
            },
            {
              prop: 'type',
              label: '类别',

            },
            {
              prop: 'centerUnder',
              label: '所属中心'
            },
            {
              prop: 'startLongitude',
              label: '起点经度'
            },
            {
              prop: 'startLatitude',
              label: '起点纬度'
            },
            {
              prop: 'endLongitude',
              label: '终点经度'
            },
            {
              prop: 'endLatitude',
              label: '终点纬度'
            },
            {
              prop: 'roadLength',
              label: '里长'
            },
            {
              prop: '',
              label: '操作',
              btn: 'editAndDel',
              del: (id) => {

              },
              edit: (data) => {

              }
            }
          ]
        },
        dialogCfg: {},
        editData: {
          username: '',
          realName: '',
          password: '',
          mobile: '',
          unit: '',
          department: '',
          post: '',
          groups: '',
          status: true
        },
        rules: {
          sectionName: [
            {required: true, message: '请输入名称', trigger: 'change'}
          ],
          centerUnder: [
            {required: true, message: '请输入所属中心', trigger: 'change'}
          ],
          startLongitude: [
            {required: true, message: '请输入起点经度', trigger: 'change'}
          ],
          startLatitude: [
            {required: true, message: '请输入起点纬度', trigger: 'change'}
          ],
          endLongitude: [
            {required: true, message: '请输入终点经度', trigger: 'change'}
          ],
          endLatitude: [
            {required: true, message: '请输入终点纬度', trigger: 'change'}
          ],
          roadLength: [
            {required: true, message: '请输入里长', trigger: 'change'}
          ],
          type: [
            {required: true, message: '请选择类型', trigger: 'change'}
          ]
        }
      }
    },
    mounted() {
      this.renewRoadType(this.loadRoadList);

    },
    methods: {
      renewRoadType(callback) {
        this.roadType = [];
        const _road = this.$kkui.cache.get('dict')['road'];
        for (let key in _road) {
          this.roadType.push({
            label: _road[key],
            value: key*1
          })
        }

        if (typeof callback === 'function') callback();

        this.$kkui.loading_deepBlue.hide();
      },

      getStateName(state) {
        const arr = this.roadType.filter(item => item.value * 1 === state);
        return arr.length === 1 ? arr[0].label : ''
      },
      loadRoadList() {
        this.$sysServer.ServerGetRoadList({
          page: this.road.page.toString(),
          limit: this.road.limit.toString(),
          ...this.road.options
        }).then(data => {
          this.road.list = data.records;
          this.road.total = data.total
        })

      },

      addRoad() {
        this.initEditData();
        this.dialogCfg = {
          title: '新增路段',
          closeShow: true,
          footerShow: true,
          width: 615,
          height: 400,
          bg: true,
          submit: (callback) => {
            this.$refs['addForm'].validate((valid) => {
              if (valid) {
                this.$sysServer.ServerAddRoad({
                  ...this.editData
                }).then(data => {
                  this.$kkui.msg({
                    icon:'1',
                    cont:'新增成功！'
                  });
                  this.initEditData();
                  this.loadRoadList();
                  typeof callback === 'function' && callback();
                });
              } else {
                return false;
              }
            });
          }
        };
        this.$refs.dialog.show = true;
      },
      editRoad(data) {
        this.editData = {...data};
        this.dialogCfg = {
          title: '编辑路段',
          closeShow: true,
          footerShow: true,
          width: 615,
          height: 400,
          bg: true,
          submit: (callback) => {
            this.$refs['addForm'].validate((valid) => {
              if (valid) {
                this.$sysServer.ServerEditRoad({
                  ...this.editData
                }).then(data => {
                  this.loadRoadList();
                  this.initEditData();
                  typeof callback === 'function' && callback();
                });
              } else {
                return false;
              }
            });
          }
        };
        this.$refs.dialog.show = true;
      },
      delRoad(id) {
        this.$kkui.alert({
          icon: 0,
          cont: '确定删除此路段吗？',
          callback: () => {
            this.$sysServer.ServerDelRoad([id * 1]).then(data => {
              this.$kkui.msg({
                cont:'删除成功！'
              });
              this.loadRoadList();
            })
          }
        });
      },

      initEditData(){
        this.editData={
          username: '',
            realName: '',
            password: '',
            mobile: '',
            unit: '',
            department: '',
            post: '',
            groups: '',
            status: true
        }
      },

      changeRoadSize(limit) {
        this.road.limit = limit;
        this.loadRoadList();
      },

      changeRoadPage(page) {
        this.road.page = page;
        this.loadRoadList();
      },
      resetOption(formName) {
        this.$refs[formName].resetFields();
        this.loadRoadList();
      }
    }
  }
</script>

<style scoped>

</style>
